<template>
    <div class="left-bottom">
        <div class="device-status">
            <div class="status-title"><span class="title-info">物联网设备状态</span></div>
            <div class="status-content">
                <dv-scroll-board :config="config" style="width:100%;height:280px"/>
            </div>
        </div>
    </div>

</template>
<script setup>
import { ref} from "vue"

const loading = ref(true)

const config={
    header: ['设备名称', '在线率','数据'],
    data: [
        ['行1列1', '111', 45],
        ['行2列1', '行2列2', 10],
        ['行3列1', '行3列2', 30],
        ['行4列1', '行4列2', 15],
        ['行5列1', '行5列2', 20],
        ['行6列1', '行6列2', 18],
        ['行7列1', '行7列2', 6],
        ['行8列1', '行8列2', 33],
        ['行9列1', '行9列2', 26],
        ['行10列1', '行10列2', 58]
    ],
    index:true,
    indexHeader:'序号',
    headerBGC:'none',
    oddRowBGC:'none',
    evenRowBGC:'none',
    rowNum:5
}


// onMounted(() => {
    
// })

</script>

<style scoped lang="less">
.left-bottom{
    height:342px;
    width:548px;
    background: url('../components/img/device-bg.png') no-repeat;
    background-size: 100% 100%;
    transform: matrix(1, 0, 0, 1, 1, 0);
    transition-duration: 0ms;
    // margin-bottom:20px;

}
.device-status{
    padding:15px 20px;
    display:flex;
    flex-direction:column;
    height:100%;
    .status-title{
        color:#fff;
        background: url('../components/img/title-bg.png') no-repeat;
        background-size: 100% 100%;
        height:36px;
        line-height:36px;
        .title-info{
            margin-left:40px;
        }
    }
}

:deep(.header){
    height:36px;
    line-height:36px;
    font-weight:700;
    font-size:22px;
    background:-webkit-linear-gradient(bottom,#fff,#5eadff);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
    background-clip:text;
    text-fill-color:transparent;
    
}
:deep(.dv-scroll-board .rows .row-item){
    border-bottom: 1px solid transparent;
    border-image: linear-gradient(to left, #003eff, rgba(42, 89, 204, 0.51)) 1; /* 渐变作为边框 */
    border-image-slice: 1; /* 边框厚度 */
}
</style>